<template>
<div>
    <Menu :theme="theme2" width="auto" :active-name="menuActive" :open-names="[menuOpened]" v-if="!shrink" @on-select="changeMenu" accordion>
        <Submenu v-for="(item, index) in menuList" :key="item.path" :name="item.path">
            <template slot="title">
                <Icon :type="item.icon"></Icon>
                <span class="layout-text">{{itemTitle(item)}}</span>
            </template>
            <template v-for="(child,dindex) in item.children">
                <MenuItem :name="item.path+'/'+child.path" :key="child.path">
                    <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></Icon>
                    <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
                </MenuItem>
            </template>
        </Submenu>
    </Menu>
    <div v-else>
        <div style="text-align: center;" v-for="(item, index) in menuList" :key="index">
            <Dropdown transfer v-if="item.children.length > 0" placement="right-start" :key="index" @on-click="changeMenu">
                <Button style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
                    <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
                </Button>
                <DropdownMenu style="width: 200px;" slot="list">
                    <template v-for="(child, i) in item.children">
                        <DropdownItem :name="item.path+'/'+child.path" :key="i"><Icon :type="child.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(child) }}</span></DropdownItem>
                    </template>
                </DropdownMenu>
            </Dropdown>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {appRouter} from '@/router/router'
    export default {
        props:{
            iconColor: {
                type: String,
                default: 'white'
            },
            iconSize: Number,
            shrink: {
                type: Boolean,
                default: false
            },
        },
        computed: {
        // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters({
                menuOpened:'getMenuOpened',
                menuActive:'getMenuActive',
                menuList:'getMenuList'
            })
        },
        data () {
            return {
                theme2: 'dark'
            }
        },
        methods: {
            changeMenu (name) {
                console.log("name",name);
                this.$store.commit('MENU_SELECT', name) // 选择菜单
            },
            itemTitle (item) {
                if (typeof item.title === 'object') {
                    return this.$t(item.title.i18n);
                } else {
                    return item.title;
                }
            }
        },
        created () {
             //this.menuList = appRouter;
        }
    }
</script>
